<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #content {
        display: none;
        position: absolute;
        top: 30px;
        left: 0;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        overflow: auto;
      }
      .item {
        background-color: aliceblue;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
      }
      .item-selected {
        background-color: aqua;
      }
      .item:hover {
        background-color: antiquewhite;
      }
    </style>
  </head>

  <body>
    <div style="height: 2000px">
      <div style="width: 200px; margin-top: 100px; position: relative">
        <input id="select" type="text" />
        <div id="content"></div>
      </div>
    </div>

    <script>
      function $(id) {
        return document.getElementById(id)
      }
      window.addEventListener('click', function (e) {
        if (e.target.id !== 'select') {
          $('content').style.display = 'none'
        }
      })
      $('select').style.width = '200px'
      $('select').addEventListener('focus', () => {
        $('content').style.display = 'block'
        addSelectClass()
      })
      function addSelectClass() {
        const itemList = document.querySelectorAll('.item')
        itemList.forEach((item) => {
          if (item.innerHTML === $('select').value) {
            item.classList.add('item-selected')
          }
        })
      }
      const len = 500000
      function handle1() {
        const fragment = document.createDocumentFragment()
        for (let i = 0; i < len; i++) {
          const div = document.createElement('div')
          div.style.height = '30px'
          div.innerHTML = i + 1
          fragment.appendChild(div)
        }
        $('content').appendChild(fragment)
      }
      // handle1()
      function handleSplitTask() {
        const taskLen = 100

        function task(index) {
          if (index < len) {
            const min = Math.min(index + taskLen, len)
            const fragment = document.createDocumentFragment()
            for (let i = index; i < min; i++) {
              const div = document.createElement('div')
              div.style.height = '30px'
              div.innerHTML = i + 1
              fragment.appendChild(div)
            }
            $('content').appendChild(fragment)
            setTimeout(task.bind(null, min), 0)
          }
        }
        task(0)
      }
      // handleSplitTask()
      function vScroll() {
        const content = $('content')
        content.style.height = '300px'
        content.style.position = 'relative'
        const height = len * 30 + 'px'
        const div = document.createElement('div')
        div.style.height = height

        content.appendChild(div)
        content.addEventListener('scroll', handleScroll)
        const view = document.createElement('div')
        view.id = 'view'
        view.style.height = '300px'
        view.style.width = '185px'
        view.style.position = 'absolute'
        view.style.left = 0
        view.style.top = 0
        view.style.zIndex = 100
        for (let i = 0; i < 10; i++) {
          const item = document.createElement('div')
          item.className = 'item'
          item.innerHTML = i + 1
          view.appendChild(item)
        }
        content.appendChild(view)
        view.addEventListener('click', function (e) {
          const label = e.target.innerHTML
          $('select').value = label
        })
        function handleScroll(e) {
          requestAnimationFrame(() => {
            const view = $('view')
            view.innerHTML = ''
            const scrollTop = e.target.scrollTop
            const index = Math.floor(scrollTop / 30)
            view.style.top = scrollTop + 'px'
            const min = Math.min(index + 10, len)
            for (let i = index; i < min; i++) {
              const item = document.createElement('div')
              item.className = 'item'
              item.innerHTML = i + 1
              view.appendChild(item)
            }
            addSelectClass()
          })
        }
      }
      vScroll()
    </script>
  </body>
</html>
